<template>
	<div style="margin-top: 12vh">
		<el-row style="display: flex; flex-direction: column">
			<el-col :span="8" :offset="8" style="margin-bottom: 2vh">
				<div style="margin-bottom: 1.5vh">
					<el-text type="info">用户名：</el-text>
				</div>
				<div>
					<el-input
						v-model="username"
						style="width: 240px"
						type="text"
						placeholder="请输入您的用户名"
					/>
				</div>
			</el-col>
			<el-col :span="8" :offset="8" style="margin-bottom: 2vh">
				<div style="margin-bottom: 1.5vh">
					<el-text type="info">密码：</el-text>
				</div>
				<div>
					<el-input
						v-model="password"
						style="width: 240px"
						type="password"
						placeholder="请输入修改后的密码"
						show-password
					/>
				</div>
			</el-col>
			<el-col :span="8" :offset="8" style="margin-bottom: 2vh">
				<div style="margin-bottom: 1.5vh">
					<el-text type="info">确认密码：</el-text>
				</div>

				<div>
					<el-input
						v-model="confirmPwd"
						style="width: 240px"
						type="password"
						placeholder="确认修改后的密码"
						show-password
					/>
				</div>
				<el-text type="danger" size="small"
					>密码长度需大于8个字符且小于18个字符且必须含有一个英文字母</el-text
				>
			</el-col>
		</el-row>
		<el-row :style="{ 'margin-top': marginTop }">
			<el-col :span="24" :offset="btnOffset">
				<el-button
					type="success"
					size="large"
					style="width: 100%"
					@click="submitPassword"
					>上传至服务器</el-button
				>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import { onBeforeMount, toRefs } from 'vue';
import axios from 'axios';

const props = defineProps({
	btnOffset: {
		default: 0,
	},
	marginTop: {
		default: '10vh',
	},
});
let { btnOffset, marginTop } = toRefs(props);

const password = ref('');
const confirmPwd = ref('');
let username = ref('');
const submitPassword = async () => {
	if (username.value) {
		if (password.value && confirmPwd.value) {
			if (
				password.value.length > 8 &&
				/[A-Za-z]/.test(password.value) &&
				password.value.length < 18
			) {
				if (password.value === confirmPwd.value) {
					try {
						const res = await axios({
							baseURL: 'http://localhost:5000',
							url: '/updateUserPassword',
							method: 'post',
							data: {
								username: username.value,
								password: password.value,
							},
						});
						if (res.data.state === 'ok') {
							ElNotification({
								title: 'Success',
								message: '密码修改成功',
								type: 'success',
							});
							return location.reload();
						} else {
							ElNotification({
								title: 'danger',
								message: '密码修改失败',
								type: 'danger',
							});
							return location.reload();
						}
					} catch (error) {
						console.log(error);
						ElNotification({
							title: 'danger',
							message: '服务器错误',
							type: 'danger',
						});
						return location.reload();
					}
				} else {
					return ElNotification({
						title: 'Warning',
						message: '两次输入的密码不一致',
						type: 'warning',
					});
				}
			} else {
				ElNotification({
					title: 'warning',
					message:
						'密码长度需大于8个字符且小于18个字符且必须含有一个英文字母',
					type: 'warning',
				});
			}
		} else {
			return ElNotification({
				title: 'Warning',
				message: '密码与确认密码都不能为空',
				type: 'warning',
			});
		}
	} else {
		return ElNotification({
			title: 'Warning',
			message: '用户名不能为空',
			type: 'warning',
		});
	}
};

onBeforeMount(() => {
	username.value = localStorage.getItem('username');
});
</script>

<style></style>
